<header class="pageHeader">
  <h3><i class="fa fa-cog fa-lg page-caption" aria-hidden="true"></i> {{'pageHeader.Settings' | translate}}</h3>
</header>

<div [@fadeInOut]>
  <div class="d-sm-flex flex-row mb-2">
    <ul ngbNav #tab="ngbNav" class="nav nav-tabs nav-tabs--vertical nav-tabs--left"
        [activeId]="activeTab" [orientation]="'vertical'" [animation]="false"
        (activeIdChange)="showDatatable = false" (shown)="showDatatable = true">
      <li [ngbNavItem]="profileTab">
        <a ngbNavLink routerLink="." [fragment]="profileTab">
          <i class="fa fa-user-circle-o fa-fw" aria-hidden="true"></i> {{'settings.tab.Profile' | translate}}
        </a>
        <ng-template ngbNavContent>
          <h4>{{'settings.header.UserProfile' | translate}}</h4>
          <hr class="hr-separator" />
          <div [@fadeInOut] class="content-container ps-lg-2">
            <app-user-info></app-user-info>
          </div>
        </ng-template>
      </li>
      <li [ngbNavItem]="preferencesTab">
        <a ngbNavLink routerLink="." [fragment]="preferencesTab">
          <i class="fa fa-sliders fa-fw" aria-hidden="true"></i> {{'settings.tab.Preferences' | translate}}
        </a>
        <ng-template ngbNavContent>
          <h4>{{'settings.header.UserPreferences' | translate}}</h4>
          <hr class="hr-separator" />
          <div [@fadeInOut] class="content-container ps-lg-2">
            <app-user-preferences></app-user-preferences>
          </div>
        </ng-template>
      </li>
      @if (canViewUsers) {
        <li [ngbNavItem]="usersTab">
          <a ngbNavLink routerLink="." [fragment]="usersTab">
            <i class="fa fa-users fa-fw" aria-hidden="true"></i> {{'settings.tab.Users' | translate}}
          </a>
          <ng-template ngbNavContent>
            <h4>{{'settings.header.UsersManagements' | translate}}</h4>
            <hr class="hr-separator" />
            @if (showDatatable){
              <div [@fadeInOut] class="content-container ps-lg-1">
                <app-users-management></app-users-management>
              </div>
            }
          </ng-template>
        </li>
      }
      @if (canViewRoles) {
        <li [ngbNavItem]="rolesTab">
          <a ngbNavLink routerLink="." [fragment]="rolesTab">
            <i class="fa fa-shield fa-fw" aria-hidden="true"></i> {{'settings.tab.Roles' | translate}}
          </a>
          <ng-template ngbNavContent>
            <h4>{{'settings.header.RolesManagement' | translate}}</h4>
            <hr class="hr-separator" />
            @if (showDatatable){
              <div [@fadeInOut] class="content-container ps-lg-1">
                <app-roles-management></app-roles-management>
              </div>
            }
          </ng-template>
        </li>
      }
    </ul>
    <div [ngbNavOutlet]="tab" class="w-100"></div>
  </div>
</div>
